<template>
	<view>
		<view class="bg-box">
			<view class="cu-bar">
				<view class="action">
					<text class="bg-box-text cuIcon-back text-gray"></text>
				</view>
			</view>
		</view>
		<view class="conversation">
			<view class="conversation-box  radius shadow-warp ">
				<view class="conversation-text1">
					收集世界各地的跳蚤市场
				</view>
				<view class="conversation-text2">
					你去过哪些有趣的跳蚤市场，快来跟大家分享一下 吧。别忘了在描述里写上[所在城市+市集地址+开 发时间+推荐理由]哦~
				</view>
				<view class="conversation-but-box">
					<view class="conversation-text3">
						回答<text class="conversation-text4 conversation-p">2</text>
						回答<text class="conversation-p"> 6</text>
					</view>
					<button class="conversation-but">关注话题</button>
				</view>
			</view>
			<scroll-view scroll-x class="tabs-box nav text-left bg-white">
				<view class="tabs-text cu-item" :class="index==TabCur?'text-blue cur tabs-text1':'tabs-text2'" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			<view class="">
				<view class="whole">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="whole-img cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
							</view>
							<view class="content">
								<view class="text-grey">
									<view class="text-cut whole-text1">包图君</view>
									
								</view>
								<view class="text-gray text-sm flex">
									<view class="text-cut">
										<text class="whole-text">吉林&nbsp;长春</text>
										
									</view>
								</view>
							</view>
							<view class="action">
								<view class="cu-tag round bg-blue lg text-center padding">关注</view>
							</view>
						</view>
					</view>
					<view class="whole-text2">
						米兰的运河集市，每个月的最后一个周日，包你满意就是了！记得讲价！                       
					</view>
					<view class="whole-imgs-box">
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
					</view>
					<view class="whole-bottom ">
						<text class="iconfont icon-fenxiang"></text>
						<view class="whole-bottom-rigit">
							<text class="icon-1 iconfont icon-xiaoxi1"> </text>
							<text class="icon-1 icon-2 iconfont icon-ganxingqu"> </text>
							<text class="icon-1 iconfont icon-icon"> </text>
						</view>
					</view>
				</view>
				<view class="whole">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="whole-img cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
							</view>
							<view class="content">
								<view class="text-grey">
									<view class="text-cut whole-text1">包图君</view>
									
								</view>
								<view class="text-gray text-sm flex">
									<view class="text-cut">
										<text class="whole-text">吉林&nbsp;长春</text>
										
									</view>
								</view>
							</view>
							<view class="action">
								<view class="cu-tag round bg-blue lg text-center padding">关注</view>
							</view>
						</view>
					</view>
					<view class="whole-text2">
						米兰的运河集市，每个月的最后一个周日，包你满意就是了！记得讲价！                       
					</view>
					<view class="whole-imgs-box">
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
						<image src="../../static/images/pic44.png" mode="" class="whole-imgs"></image>
					</view>
					<view class="whole-bottom ">
						<text class="iconfont icon-fenxiang"></text>
						<view class="whole-bottom-rigit">
							<text class="icon-1 iconfont icon-xiaoxi1"> </text>
							<text class="icon-1 icon-2 iconfont icon-ganxingqu"> </text>
							<text class="icon-1 iconfont icon-icon"> </text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				tabs:["全部","精选","默认"]
			};
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style lang="scss">
	.bg-box{
		width: 100%;
		height:305upx;
		background: url(../../static/images/personal-bgd.png) no-repeat center;
		background-size: 100% ;
	}
	.bg-box-text{
		color: #fff;
	}
	.conversation{
		width: 100%;
		position: relative;
		.conversation-box{
			width: 690upx;
			height: 370upx;
			margin: 0 30upx;
			padding: 42upx 25upx 32upx;
			background-color: #fff;
			position: absolute;
			top: -160upx;
			.conversation-text1{
				font-size: 36upx ;
				color: #313131 ;
				font-weight:400;
			}
			.conversation-text2{
				font-family:59;
				font-weight:400;
				color: #7A7A7A;
				margin-top: 28upx;
				padding-bottom: 31upx;
				border-bottom: 2upx solid #F6F6F6;
				line-height: 40upx;
			}
			.conversation-text3{
				font-size: 22upx;
				color: #CCCCCC;
				line-height: 94upx;
				
			}
			.conversation-text4{
				margin-right: 35upx;
			}
			.conversation-p{
				padding: 0 10upx;
			}
			.conversation-but-box{
				position: relative;
				.conversation-but{
					width: 156upx;
					height: 60upx;
					color: #ADCFFF;
					background-color: #fff;
					border: 1upx solid #ADCFFF;
					border-radius: 30upx;
					font-size: 10upx;
					position: absolute;
					right: 0;
					top: 18upx 
				}
			}		
		}
		.tabs-box{
			padding: 240upx 30upx 0 30upx ;
			.tabs-text{
				font-size: 35upx;
			}
			.tabs-text1{
				font-weight: 600 !important;
			}
			.tabs-text2{
				color: #959595;
			}
		}
		.whole{
			padding: 50upx 30upx 0 30upx;
			margin-bottom: 10upx;
			background-color: #fff;
			.whole-img{
				width: 100upx;
				height: 100upx;
			}
			.whole-text1{
				font-size: 29upx;
				color: #4A4A4A;
				font-weight:600;
			}
			.whole-text{
				font-size: 22upx;
				color: #B5B5B5;
			}
			.whole-text2{
				color: #686868;
				font-size: 28upx;
				line-height: 50upx;
				font-weight: 600;
				padding-top: 20upx;
			}
			.whole-imgs-box{
				margin-top: 32upx;
				.whole-imgs{
					width: 222upx;
					height: 222upx;
					margin: 5.5upx;
					vertical-align: top;
				}
			}
			.whole-bottom{
				position: relative;
				.iconfont{
					font-size: 38upx;
					line-height: 102upx;
				}
				.whole-bottom-rigit{
					position: absolute;
					right: 0;
					top: 0;
					.icon-1{
						margin-left: 66upx;
						font-size: 42upx;
					}
					.icon-2{
						font-size: 48upx
					}
				}
			}
			
		}
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar{
		left: 0 !important;
	}
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border:none !important;
	}
</style>